<script lang="ts" setup>
import {IForm} from '@/interface/form'
import {ref} from 'vue'

defineProps({
	hideDialog: {
		type: Function,
		default() {
			return () => {
			}
		}
	},
	title: {
		type: String,
		default: 'add'
	}
})

const form = ref<IForm>({
	data: {
		text: '',
		number: '',
		number1: 0,
		number2: [],
		select: '',
		checkbox: [],
		textarea: '',
		slotName: '',
		slotIcon: '',
		slotInput: '',
		radio: '',
		simple: [],
		editor: '<p><span data-w-e-type="gapFilling" data-gap-num="1" class="gapFilling">1</span><span data-w-e-type="gapFilling" data-gap-num="2" class="gapFilling">2</span><span data-w-e-type="gapFilling" data-gap-num="3" class="gapFilling">3</span><span data-w-e-type="gapFilling" data-gap-num="4" class="gapFilling">4</span><span data-w-e-type="gapFilling" data-gap-num="5" class="gapFilling">5</span><span data-w-e-type="gapFilling" data-gap-num="6" class="gapFilling">6</span><span data-w-e-type="gapFilling" data-gap-num="7" class="gapFilling">7</span><span data-w-e-type="gapFilling" data-gap-num="8" class="gapFilling">8</span>山东人士大夫是的 上大学的萨芬收到答复是的范德萨发萨达</p>'
	},
	otherConfig: {
		labelWidth: '80px'
	},
	config: [
		{
			col: 12, // 占一行的多少宽度24: 100%, 12: 50%, 7: 33.3%, 6: 25%
			component: 'ElInput', // 类型
			name: '纯文本', // 显示的名称
			bind: 'text', // 绑定的值和data中对应,data中必须有该字段
			trigger: 'blur', // 校验时机
			isHide: false, // 是否隐藏, 优先级大于showHide, 设置为true之后页面上不显示但是提交的时候会有这个字段,可以用来设置隐藏的值
			required: '请输入文本', // 是否必填和必填的提示
			rules: [], // 其他的校验规则
			attr: {
				type: 'text',
				placeholder: '请输入文本'
			},
			methods: {}
		},
		{
			col: 12,
			component: 'el-input',
			name: '数字类型1',
			bind: 'number',
			trigger: 'blur',
			required: '请输入数字',
			rules: [],
			attr: {
				type: 'number',
				placeholder: '请输入数字'
			}
		},
		{
			col: 12,
			component: 'el-input-number',
			name: '数字类型2',
			bind: 'number1',
			trigger: 'blur',
			required: '请输入数字',
			rules: [],
			attr: {
				placeholder: '请输入数字'
			}
		},
		{
			col: 12,
			component: 'NumberRange',
			name: '取值范围',
			bind: 'number2',
			trigger: 'blur',
			required: '请输入数字',
			rules: [],
			attr: {
				minRange: {
					placeholder: '请输入' // 其余配置与el-input-number相同
				},
				maxRange: {
					placeholder: '请输入' // 其余配置与el-input-number相同
				}
			}
		},
		{
			col: 12,
			component: 'el-select',
			name: '下拉选择',
			bind: 'select',
			trigger: 'blur',
			required: '请选择',
			rules: [],
			dictList: [
				{
					value: 'Option1',
					label: 'Option1'
				},
				{
					value: 'Option2',
					label: 'Option2'
				}
			],
			attr: {
				type: 'number',
				placeholder: '请选择'
			}
		},
		{
			col: 12,
			component: 'ElCheckboxGroup',
			name: '多选框组',
			bind: 'checkbox',
			trigger: 'blur',
			required: '请选择多选框组',
			rules: [],
			dictList: [
				{
					value: 'Option1',
					label: 'Option1'
				},
				{
					value: 'Option2',
					label: 'Option2'
				}
			],
			attr: {}
		},
		{
			col: 24,
			component: 'ElInput',
			name: '文本域',
			bind: 'textarea',
			trigger: 'blur',
			required: '请输入文本域',
			rules: [],
			attr: {
				type: 'textarea',
				placeholder: '请输入文本域'
			}
		},
		{
			col: 12,
			component: 'customSlot',
			name: '插槽--按钮',
			bind: 'slotBtn',
			trigger: 'blur',
			rules: []
		},
		{
			col: 12,
			component: 'customSlot',
			name: '插槽--图标',
			bind: 'slotIcon',
			trigger: 'blur',
			rules: []
		},
		{
			col: 12,
			component: 'customSlot',
			name: '插槽--输入',
			bind: 'slotInput',
			trigger: 'blur',
			required: '请输入插槽输入框',
			rules: [{min: 3, max: 5, message: '长度在3-5之间', trigger: 'blur'}]
		},
		{
			col: 12,
			component: 'ElRadioGroup',
			name: '单选框组',
			bind: 'radio',
			trigger: 'blur',
			required: '请选择单选框组',
			rules: [],
			dictList: [
				{
					value: 'Option1',
					label: 'Option1'
				},
				{
					value: 'Option2',
					label: 'Option2'
				}
			],
			attr: {}
		},
		{
			col: 24,
			component: 'SimpleUpload',
			name: '分片上传',
			bind: 'simple',
			required: '请上传文件',
			trigger: 'change',
			attr: {
				fileType: 'image'
			}
		},
		{
			col: 24,
			component: 'Editor',
			name: '富文本',
			bind: 'editor',
			trigger: 'blur',
			required: '请输入富文本'
		}
	]
})
const baseFormRef = ref()
const submit = async () => {
	let flag = await baseFormRef.value.validate()
	console.log(flag, '点击确定', form)
}
</script>

<template>
	<el-dialog
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:title="title === 'edit' ? '编辑' : '新增'"
		destroy-on-close
		model-value
		top="10vh"
		width="800px"
		@close="hideDialog"
	>
		<BaseForm ref="baseFormRef" v-model="form.data" :form-config="form">
			<template #slotBtn>
				<el-button type="primary">插槽按钮</el-button>
			</template>
			<template #slotIcon>
				<BaseIcon :size="20" color="#f00" icon="material-symbols:ac-unit"/>
			</template>
			<template #slotInput>
				<el-input v-model="form.data.slotInput"/>
			</template>
		</BaseForm>
		<template #footer>
			<el-button @click="hideDialog">取 消</el-button>
			<el-button type="primary" @click="submit">确 定</el-button>
		</template>
	</el-dialog>
</template>

<style lang="scss" scoped>

</style>
